<script setup lang="ts">
import { nextKey } from '@/widgets/util'
import { computed } from 'vue'

const props = defineProps<{
  name: string
}>()

const emits = defineEmits<{
  (e: 'update:name', v: string): void
}>()

const txt = computed(() => {
  console.log('compute txt')
  return props.name + '_txt'
})

function changeName() {
  emits('update:name', nextKey())
}
</script>
<template>
  <div class="demo-child">
    <div style="padding-bottom: 1em">txt: {{ txt }}</div>
    <button @click="changeName">change</button>
  </div>
</template>
